<template>
  <teleport to="#message">
    <div class="alert message-info fixed-top w-50 mx-auto d-flex justify-content-between mt-2" 
    :class="classOBject" v-if="isVisible">
        <span>{{message}}</span>
        <button type="button" class="btn-close" @click.prevent="hide" aria-label="Close"></button>
    </div>
  </teleport>
</template>

<script lang='ts'>
export type MessageType = 'success' | 'error' | 'default'
import {defineComponent,PropType,ref} from 'vue'
import useDOMCreate from '@/hooks/useDOMCreate'
export default defineComponent({
    props: {
        message: String,
        msgType: {
            type:String as PropType <MessageType>,
            default: 'default'
        }
    },
    emits: ['close-message'],
    setup(props,context) {
        useDOMCreate('message')
        const isVisible = ref(true) // 定义是否显示
        const classOBject = {
            'alert-success': props.msgType === 'success',
            'alert-danger': props.msgType === 'error',
            'alert-primary': props.msgType === 'default'
        }
        const hide = () => {
            isVisible.value = false
            context.emit('close-message',true)
        }

        return {
            isVisible,
            classOBject,
            hide
        }
    }
})
</script>

<style>

</style> 